<template>
	<view>
		<div class="tab">
			<uv-tabs :current="current" lineWidth="30" lineColor="#60bcbb"
				:activeStyle="{color: '#60bcbb',fontWeight: 'bold'}" :list="list" @click="click"></uv-tabs>
			<view class="two-mode" v-if="show" @click="overlayClick()">
				<div class="two-class">
					<view v-for="(item,i) in selectData.children"
						:class="slectId==item.healthId?'itemActive class-item':'class-item'"
						@click.stop="tWOChang(item)">
						<text>{{item.healthName}}</text>
					</view>
				</div>
			</view>
		</div>


	</view>
</template>

<script>
	export default {
		name: "Healthclass",
		data() {
			return {
				list: [{
					name: '全部',
					healthId: 0
				}],
				treeList: [],
				show: false,
				isShowtwoclass: false,
				selectData: {},
				slectId: {},
				current: 0,
			};
		},
		props: {
			healthType: {
				type: String,
				default: '0'
			},
			index: {
				type: String,
				default: 0
			},
		},

		mounted() {
			if (this.healthType) {
				this.current = Number(this.index)
			}
			this.getClass()
		},
		methods: {
			// 分类查询
			async getClass() {
				try {
					const res = await this.muajax.healthClassification({})
					let arr = res.rows.map(v => {
						return {
							...v,
							name: v.healthName
						}
					})
					this.list = this.list.concat(this.handleTree(arr, 'healthId', 'parentId', 'children'))

				} catch (e) {
					console.log(e)
					//TODO handle the exception
				}

			},
			/**
			 * 构造树型结构数据
			 * @param {*} data 数据源
			 * @param {*} id id字段 默认 'id'
			 * @param {*} parentId 父节点字段 默认 'parentId'
			 * @param {*} children 孩子节点字段 默认 'children'
			 */
			handleTree(data, id, parentId, children) {
				const config = {
					id: id || 'id',
					parentId: parentId || 'parentId',
					childrenList: children || 'children'
				};
				const childrenListMap = {};
				const tree = [];
				for (const d of data) {
					const id = d[config.id];
					childrenListMap[id] = d;
					if (!d[config.childrenList]) {
						d[config.childrenList] = [];
					}
				}
				for (const d of data) {
					const parentId = d[config.parentId];
					const parentObj = childrenListMap[parentId]
					if (!parentObj) {
						tree.push(d);
					} else {
						parentObj[config.childrenList].push(d)
					}
				}
				return tree;
			},
			click(item) {
				if (item.index == 0) {
					this.healthId = null
					this.tWOChang(item)
				} else {
					this.selectData = item
					if (this.selectData.children && this.selectData.children.length) {
						this.show = true
					} else {
						this.show = false
						this.tWOChang(item)
					}

				}
			},
			// 二级选择
			tWOChang(item) {
				this.slectId = item.healthId
				this.$emit('onChange', item.healthId)
				this.show = false
			},
			overlayClick() {
				if (!this.slectId) {
					this.slectId = this.selectData.healthId
				}
				this.show = false
				this.tWOChang(this.selectData)
			}

		}
	}
</script>

<style scoped lang="less">
	.two-class {
		background: #fff;
		display: flex;
		border-top: 1px solid #f1f1f1;
		padding: 20rpx;
		box-sizing: border-box;
		border-top: 1px solid #f1f1f1;

		.class-item {
			font-size: 24rpx;
			line-height: 42rpx;
			color: #666666;
			margin-right: 20rpx;
			padding: 10rpx;
		}

		.itemActive {
			color: #60bcbb;
			border: 1px solid #60bcbb;
			border-radius: 10rpx;
		}
	}

	.two-mode {
		position: absolute;
		left: 0px;
		top: 198rpx;
		height: 1344rpx;
		background: rgba(0, 0, 0, 0.3);
		width: 100%;
		z-index: 999;
		transition: all 0.5s;

	}
</style>